<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>充值</title>
    <link href="css/mui.css" rel="stylesheet" />
    <link href="css/user.css" rel="stylesheet" />
    <style>
        .userCount_other input {
            height: .75rem !important;
            margin: 0;
            text-align: center;
            font-size: 0.3rem !important;
            color: #989898;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-nav header">
            <a href="user_list.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h2 class="mui-title">充值</h2>
            <a href="user_history.html" class="mui-icon mui-pull-right" style="margin-top: 6px;font-size: 14px;">明细</a>
        </header>


        <div class="mui-content" style="background: #f2f2f2;">
            <div class="userCharge">
                <div class="userChargeSec">
                    <div class="userChargeTit">
                        <h2>选择充值数额</h2>
                    </div>
                    <div class="userChargeCount">
                        <ul>
                            <li>
                                <span @click="chooseAmount(50)">50</span>
                            </li>
                            <li>
                                <span @click="chooseAmount(100)">100</span>
                            </li>
                            <li>
                                <span @click="chooseAmount(200)">200</span>
                            </li>
                            <li>
                                <span @click="chooseAmount(500)">500</span>
                            </li>
                            <li>
                                <span @click="chooseAmount(1000)">1000</span>
                            </li>
                            <li class="userCount_other">
                                <input v-model='amount' type="number" placeholder="其他" onblur="this.placeholder='其他'" onfocus="this.placeholder=''">
                                <!--<span>其他</span>-->
                            </li>
                        </ul>
                        <!--<div class="userChargeCountHide">-->
                        <!--<input v-model='amount' type="text" placeholder="输入金额" onblur="this.placeholder='输入金额'"-->
                        <!--onfocus="this.placeholder=''">-->
                        <!--</div>-->
                        <!-- <p>充值的金额只能用于购彩，不可提现，中奖的钱可提现</p> -->
                    </div>
                </div>
                <div class="userChargeSec">
                    <div class="userChargeTit">
                        <h2>选择充值方式</h2>
                    </div>
                    <div class="userChargePay">

                        <ul class="mui-table-view">
                            <!-- <li class="mui-table-view-cell" @click="choosePayMethod('ALIPAYH5')">
                            <label class="mui-tab-label">
                                <img src="images/pay2.png">
                                <span>支付宝</span>
                                <div class="selfCheckbox selfRadio fl_right">
                                    <input type="radio" name="cb">
                                    <i></i>
                                </div>
                            </label>
                        </li> -->
                            <!-- <li class="mui-table-view-cell" @click="choosePayMethod('WECHAT')">
                            <label class="mui-tab-label">
                                <img src="../images/pay3.png">
                                <span>微信</span>
                                <div class="selfCheckbox selfRadio fl_right">
                                    <input type="radio" name="cb" checked="checked">
                                    <i></i>
                                </div>
                            </label>
                        </li> -->
                            <li class="mui-table-view-cell" @click="choosePayMethod('QRCODE','ALIPAY')">
                                <label class="mui-tab-label">
                                    <img src="images/pay2.png">
                                    <span>支付宝</span>
                                    <div class="selfCheckbox selfRadio fl_right">
                                        <input type="radio" name="cb">
                                        <i></i>
                                    </div>
                                </label>
                            </li>
                            <li class="mui-table-view-cell" @click="choosePayMethod('QRCODE')">
                                <label class="mui-tab-label">
                                    <img src="images/pay3.png">
                                    <span>微信</span>
                                    <div class="selfCheckbox selfRadio fl_right">
                                        <input type="radio" name="cb">
                                        <i></i>
                                    </div>
                                </label>
                            </li>
                            <li class="mui-table-view-cell" @click="choosePayMethod('BANKCARD')">
                                <label class="mui-tab-label">
                                    <img src="images/pay1.png">
                                    <span>银行卡</span>
                                    <div class="selfCheckbox selfRadio fl_right">
                                        <input type="radio" name="cb">
                                        <i></i>
                                    </div>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="userInfoSubmit"><span class="btn-red btn-bloak" id="confirmPay">确认充值</span></div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

<script type="text/javascript">
    'use strict'

    $(document).ready(function () {
        if (!sessionStorage.getItem("Authorization")) {
            mui.alert('', '请先登录', function () {
                window.location.href = 'login.html'
            })
        }

        new Vue({
            el: '#app',
            data: {
                amount: '',
                payMethod: 'WECHAT',
            },
            mounted: function () {
                let that = this
                mui("body").on('tap', ".userChargeCount ul li span", function (event) {
                    let txt = $(this).text()
                    that.amount = $(this).text()
                    $('.userCount_other input').blur();
                    $(this).parent("li").addClass("active")
                    $(this).parent("li").siblings("li").removeClass('active')
                    if ($(this).parent("li").hasClass('userCount_other')) {
                        $(".userChargeCountHide").addClass("active")
                    } else {
                        $(".userChargeCountHide").removeClass("active")
                    }
                })

                $('.userCount_other input').focus(function () {
                    $('.userChargeCount li').removeClass('active');
                })

                var pattern = /^[0-9]+$/;
                mui("body").on('tap', "#confirmPay", function (event) {
                    if (that.amount == '') {
                        mui.alert('', '请输入金额', function () { })
                        return false;
                    } else if (that.amount < 10) {
                        mui.alert('', '最低充值10元', function () { })
                        return false;
                    } else if (pattern.test(that.amount) == false) {
                        mui.alert('', '请输入整数', function () { })
                        return false;
                    }
                    if (that.payMethod == 'ALIPAYH5' || that.payMethod == 'QRCODE' || that.payMethod == 'BANKCARD') {
                        that.confirmPay()
                        console.log(that.payMethod)
                    } else {
                        mui.alert('', '请选择其他方式', function () { })
                    }
                })
            },
            methods: {
                /**
                 *  选择充值方式
                 */
                choosePayMethod: function (payMethod, ALIPAY) {
                    this.payMethod = payMethod
                    this.ALIPAY = ALIPAY
                },
                /**
                 *  确认充值
                 */
                confirmPay: function () {
                    var url = 'biz/api/pay',
                        that = this;
                    common.ajax(url, { amount: that.amount, paramenter: '1', payMethod: that.payMethod }, that.paySuc)
                },
                paySuc: function (data) {
                    var that = this
                    console.log(data)
                    sessionStorage.removeItem('MONEY')
                    sessionStorage.removeItem('ALIPAYH5')
                    sessionStorage.removeItem('QRCODE')
                    sessionStorage.removeItem('BANKCARD')
                    if (data.code == 1001) {
                        mui.alert('', data.msg, function () { })
                        return false;
                    }
                    if (data.code === 1000) {
                        sessionStorage.setItem('MONEY', that.amount)
                        if (that.payMethod == 'ALIPAYH5') {
                            sessionStorage.setItem('ALIPAYH5', data.data.payUrl)
                            window.open('alipayFrom.html')
                        } else if (that.payMethod == 'QRCODE' && that.ALIPAY == 'ALIPAY') {
                            window.open('alipayqr://platformapi/startapp?saId=10000007&qrcode=' + data.data.payUrl)
                        } else if (that.payMethod == 'QRCODE') {
                            sessionStorage.setItem('QRCODE', data.data.payUrl)
                            window.open('qrcode.html')
                        } else if (that.payMethod == 'BANKCARD') {
                            sessionStorage.setItem('BANKCARD', data.data.payUrl)
                            window.open(data.data.payUrl)
                        }
                        var url = 'biz/api/queryByRechargeNoAndMemerId' + '?rechargeNo=' + data.data.orderNo

                        mui.confirm('', '请在弹出窗口中完成支付', ['未完成支付', '已完成支付'], function (e) {
                            if (e.index === 1) {
                                common.ajax(url, null, function (res) {
                                    if (res.code === 1000) {
                                        window.location = res.data.amount !== null ? 'alipayok.html' : 'alipayerror.html'
                                    }
                                }, function () { }, 'GET')
                            }
                        })
                    }
                }
            }
        })

        mui('body').on('tap', 'a', function () { if (this.href) { document.location.href = this.href } })
    })
</script>

</html>